<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据计算页面</title>
    <link rel="stylesheet" th:href="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css}">
    <script th:src="@{//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js}"></script>
    <script th:src="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js}"></script>
    <style>
        .container {
            max-width: 800px;
            margin-top: 30px;
        }
        .result-area {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #e9ecef;
        }
        #calculateBtn {
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .form-label {
            font-weight: 500;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 身份信息展示 -->
    <div class="mb-4">
        <h2 class="text-primary">接入连接器计算页面: <span th:text="${acconName} ?: '未配置'"></span></h2>
    </div>

    <!-- 表单部分 -->
    <form>
        <!-- 下拉选择框 -->
        <div class="mb-3">
            <label for="calcSelect" class="form-label">选择计算选项</label>
            <select id="calcSelect" class="form-select">
                <option value="">请选择计算选项</option>
                <!-- 选项会通过AJAX动态加载 -->
            </select>
        </div>

        <!-- 多行输入框 -->
        <div class="mb-3">
            <label for="inputData" class="form-label">请输入数据（每行一条）：</label>
            <textarea class="form-control" id="inputData" rows="5" placeholder="请输入数据"></textarea>
        </div>

        <!-- 计算按钮 -->
        <div class="mb-3">
            <button type="button" class="btn btn-primary" id="calculateBtn">计算</button>
        </div>
    </form>

    <!-- 结果显示区域 -->
    <div class="result-area">
        <h5>计算结果：</h5>
        <div id="resultContent">
            <p class="text-muted">暂无计算结果，请点击计算按钮</p>
        </div>
    </div>
</div>

<script>
    $(function() {
        // 动态加载下拉框选项
        $.ajax({
            url: '/calc/list',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                var data = response.rows;
                var select = $('#calcSelect');
                select.find('option:not(:first)').remove();
                $.each(data, function(index, item) {
                    select.append(new Option(item.name, item.name));
                });
            },
            error: function(xhr, status, error) {
                console.error('加载下拉选项失败:', error);
            }
        });

        // 计算按钮点击事件
        $('#calculateBtn').click(function() {
            var selectedValue = $('#calcSelect').val();
            if (!selectedValue) {
                alert('请选择一个选项');
                return;
            }

            // 获取输入数据
            var inputData = $('#inputData').val();

            if (!inputData.trim()) {
                alert('请输入数据');
                return;
            }

            // 显示加载中状态
            $('#resultContent').html('<div class="text-center"><div class="spinner-border text-primary" role="status"></div><p>计算中...</p></div>');

            // 发送AJAX请求到后端
            $.ajax({
                url: '/calc/process', // ctx是RuoYi的前端上下文，如果没有则直接用'/api/calc/process'
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    bucketName: selectedValue,
                    inputData: inputData
                }),
                success: function(response) {
                    if(response && response.code == 200){
                        // 显示计算结果
                        $('#resultContent').html(
                            '<div class="alert alert-success">' +
                            '<h6>计算成功</h6>' +
                            '<p>输入行数: ' + response.data.inputLineCount + '</p>' +
                            '<p>计算结果: ' + response.data.result + '</p>' +
                            '</div>'
                        );
                    } else {
                        $('#resultContent').html(
                            '<div class="alert alert-danger">计算失败: ' + response.msg + '</div>'
                        );
                    }
                },
                error: function(xhr, status, error) {
                    $('#resultContent').html(
                        '<div class="alert alert-danger">请求失败: ' + error + '</div>'
                    );
                }
            });
        });
    });
</script>
</body>
</html>